<template>
  <div class="personal">
    <Gheader
        style="
        margin-bottom: 6px;
        background: #ebebeb;
        color: #333333;
        font-weight: bold;
      "
        :showback="false"
        position="left"
        title=" 任务列表"
    ></Gheader>
    <!-- <div class="tasktitle">任务列表</div> -->
    <div class="listwrapper">
      <van-list
          v-model="loading"
          :finished="finished"
          finished-text="没有更多了"
          @load="getList"
          offset="10"
      >
        <div class="list-item" @click="chooseOneItems(i)" :class="i.id === currentChooseItem.id?'active':''" v-for="i in dataList">
          <div class="list-item-content">                       
            <div class="items">
              <div style="color:#0F1E3E">{{i.taskName}}</div>
            </div>
            <div class="items" style="display: flex">   
              <div style="color:#6B7280;flex: 1;font-size: 13px">计划时间：{{formatTime(i.planTime)}}</div>
              <div style="">
                <span class="status" :class="'status' + i.status">
                  <span v-if="i.status == 2">进行中</span>
                  <span v-else-if="i.status == 3">已完成</span>
                  <span v-else>计划</span>
                </span>
              </div>
            </div>
            <div class="items">
              <div style="color:#6B7280;flex: 1;font-size: 13px">{{i.departure}} -→ {{i.destination}}</div>
            </div>
            <div class="items">
              <!-- 
              <div style="color:#6B7280;flex: 1;font-size: 13px">预计完成时间：14:38</div>
             -->
              <div style="color: #3B82F6" @click="gotodetail(i)">查看详情</div>
            </div>
          </div>
        </div>
      </van-list>
    </div>
    <!-- 
    <div class="btnwrapper">
      <van-button block type="info" @click="gotodetail(currentChooseItem)" :disabled="!currentChooseItem.id">进入任务</van-button>
    </div>
    -->
  </div>
</template>

<script>
import {Tabbar, TabbarItem, Toast, Badge, SwipeCell, Field} from 'vant'
import Gheader from '@/components/Header';
import moment from 'moment'
import {getuserinfoPromise} from '@/api/myapi'
import {taskPage} from '@/api/mytask'
export default {
  name: 'Personal',
  components: {
    Gheader,
    [Tabbar.name]: Tabbar,
    [TabbarItem.name]: TabbarItem,
    [Badge.name]: Badge,
    [SwipeCell.name]: SwipeCell,
    [Field.name]: Field
  },
  data() {
    return {
      userInfo: {},
      value1: '',
      dataList: [],
      loading: false,
      finished: false,
      searchParams: {
        pageNo: 1,
        pageSize: 10
      },
      total: 0,
      disabled: true,
      currentChooseItem: {}
    }
  },
  methods: {
    moment,
    chooseOneItems(item) {
      this.currentChooseItem = item
    },
    formatTime(value) {
      if(value) {
        return moment(value).format('YYYY-MM-DD HH:mm:ss')
      }
      return ''
    },
    gotodetail(item) {
      this.$router.push('/taskDetail?id=' + item.id + '&openid=' + this.$route.query.openid)
    },
    async getuserinfo() {
      const {data} = await getuserinfoPromise(this.$route.query.openid)
      if(data) {
        return data
      } else {
        return {}
      }
    },
    async getList(pageNo) {
      if(!this.userInfo.name) {
        this.userInfo = await this.getuserinfo()
      }
      if(!this.userInfo.id) {
        this.finished = true;
        return
      }
      if(!this.userInfo.openid) {
        this.finished = true;
        return
      }
      if(pageNo) {
        this.searchParams.pageNo = pageNo
      }
      this.finished = false;
      // this.searchParams.recorder = this.userInfo.id
      this.searchParams.openid = this.userInfo.openid
      taskPage(this.searchParams, res => {
        if (res.code === 0) {
          this.loading = false;
          this.finished = false;
          if (this.searchParams.pageNo == 1) {
            this.dataList = res.data.list;
          } else {
            this.dataList.push(...res.data.list);
          }
          this.total = res.data.total;
          if (this.dataList.length >= this.total) {
            this.finished = true;
          }
          this.searchParams.pageNo = this.searchParams.pageNo + 1;
        } else {
          Toast(res.msg)
        }
      })
    }
  },
  mounted() {
    if (typeof window.entryUrl === 'undefined' || window.entryUrl === '') {
      window.entryUrl = location.href
    }
  }
}
</script>
<style lang="less" scoped>
@import '~@/assets/style/themeVariable.less';
.personal {
  background: #ffffff;
  height: 100%;
  overflow: hidden;
  box-sizing: border-box;
  position: relative;
  .options {
    display: flex;
    flex-wrap: wrap;
    .options-item {
      width: 49%;
      background: #FFFFFF;
      padding: 20px 18px 10px 18px;
      border: 1px solid #DEEAFC;
      border-radius: 10px;
      margin-bottom: 2%;
      box-sizing: border-box;
      &:nth-child(odd) {
        margin-right: 2%;
      }
      .title {
        color: #333333;
        font-size: 16px;
      }
      .imgs {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-top: 20px;
        .jt {
          width: 20px;
          height: 20px;
          border-radius: 50%;
        }
        .home-icon {
          width: 66px;
          height: auto;
        }
      }
    }
  }
}
.tasktitle {
  padding: 0 10px;
}
.listwrapper {
  height: calc(100% - 10px);
  background: #ffffff;
  overflow: auto;
  margin-top: 10px;
  padding: 10px;
  box-sizing: border-box;
}
.list-item {
  background: #ffffff;
  border-radius: 12px;
  overflow: hidden;
  margin-bottom: 16px;
  padding: 0 15px;
  box-shadow: 0px 1px 2px -1px rgba(0, 0, 0, 0.1), 0px 1px 3px  rgba(0, 0, 0, 0.1);
  &.active {
    box-shadow: 0px 1px 2px -1px rgba(59, 124, 220, 1), 0px 1px 3px  rgba(59, 124, 220, 1);
  }
}
.list-title {
  display: flex;
  align-items: center;
  padding-bottom: 10px;
  justify-content: center;
  color: rgba(15, 30, 62, 0.5);
}
.list-item-content {
  color: #646464;
  padding: 10px 5px;
  .items {
    padding: 6px 0;
    display: flex;
  }
}

.btnwrapper {
  border-top: 1px solid #dddddd;
  padding: 10px;
}
.status {
  background: #F3F4F6;
  color: #4B5563;
  padding: 5px 8px;
  border-radius: 18px;
  font-size: 12px;
}
.status1 {
  background: #F3F4F6;
  color: #4B5563;
}
.status2 {
  background: #DBEAFE;
  color: #2563EB;
}
.status3 {
  background: #2563EB;
  color: #ffffff;
}
</style>
